<template>
  <div class="root">
    <div class="top">
      <div class="content">
        <span>
          请于<span style="color: #e32a2a;">{{formattedTime}}</span>内完成支付，否则预约取消
        </span>
      </div>
      <div class="hospital">{{ $route.query.name }}</div>
      <!-- <span class="order">订单编号：{{  }}</span> -->
    </div>
    <div class="mid">
      支付金额：￥{{ money }}
    </div>
    <div class="bottom">
      <p class="select_font">选择支付方式</p>
      <!-- 此处只有行内样式才生效 -->
      <div class="pay_style" style="display: flex;">
        <div class="vx" style="background-color: #fff;width: 180px;height: 50px;
          display: flex;justify-content: center;align-items: center;position: relative;"
          @click="visiable='vx'">
          <svg style="position: absolute;left: 3;top: 3;" v-if="visiable=='vx'"
            t="1737974494777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7584" width="24" height="24">
            <path d="M514 114.3c-220 0-398.8 178.9-398.8 398.8S294 912 514 912s398.8-178.9 398.8-398.8S734 114.3 514 114.3z m0 755c-196.5 0-356.1-159.6-356.1-356.1 0-196.5 160.2-356.1 356.1-356.1 196.5 0 356.1 159.6 356.1 356.1S710.5 869.3 514 869.3z" p-id="7585" fill="#d81e06"></path><path d="M739.7 377.4L525 592.2c-24.3 24.3-63.9 24.3-88.2 0.1l-95.5-95.1-30.1 30.3 95.5 95.1c20.5 20.4 47.4 30.6 74.2 30.6 26.9 0 53.9-10.2 74.3-30.7l214.7-214.7-30.2-30.4z" p-id="7586" fill="#d81e06"></path>
          </svg>
          <svg t="1737973290114" class="icon" viewBox="0 0 1024 1024" version="1.1" 
            xmlns="http://www.w3.org/2000/svg" p-id="4223" width="36" height="36">
            <path d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z" fill="#28C445" p-id="4224"></path><path d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z" fill="#28C445" p-id="4225"></path>
          </svg>
          <span style="font-size: 20px;margin-left: 5px;">微信</span>
        </div>
        <div class="alipay" style="background-color: #fff;width: 180px;height: 50px;
          display: flex;justify-content: center;align-items: center;
          margin-left: 50px;position: relative;"@click="visiable='alipay'">
          <svg style="position: absolute;left: 3;top: 3;" v-if="visiable=='alipay'"
            t="1737974494777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7584" width="24" height="24">
            <path d="M514 114.3c-220 0-398.8 178.9-398.8 398.8S294 912 514 912s398.8-178.9 398.8-398.8S734 114.3 514 114.3z m0 755c-196.5 0-356.1-159.6-356.1-356.1 0-196.5 160.2-356.1 356.1-356.1 196.5 0 356.1 159.6 356.1 356.1S710.5 869.3 514 869.3z" p-id="7585" fill="#d81e06"></path><path d="M739.7 377.4L525 592.2c-24.3 24.3-63.9 24.3-88.2 0.1l-95.5-95.1-30.1 30.3 95.5 95.1c20.5 20.4 47.4 30.6 74.2 30.6 26.9 0 53.9-10.2 74.3-30.7l214.7-214.7-30.2-30.4z" p-id="7586" fill="#d81e06"></path>
          </svg>
          <svg t="1737973932635" class="icon" viewBox="0 0 1024 1024" version="1.1" 
          xmlns="http://www.w3.org/2000/svg" p-id="5314" width="32" height="32">
          <path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="5315"></path></svg>
          <span style="font-size: 20px;margin-left: 5px;">支付宝</span>
        </div>
        <div class="unionpay" style="background-color: #fff;width: 180px;height: 50px;
          display: flex;justify-content: center;align-items: center;
          margin-left: 50px;position: relative;"@click="visiable='unionpay'">
          <svg style="position: absolute;left: 3;top: 3;" v-if="visiable=='unionpay'"
            t="1737974494777" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7584" width="24" height="24">
            <path d="M514 114.3c-220 0-398.8 178.9-398.8 398.8S294 912 514 912s398.8-178.9 398.8-398.8S734 114.3 514 114.3z m0 755c-196.5 0-356.1-159.6-356.1-356.1 0-196.5 160.2-356.1 356.1-356.1 196.5 0 356.1 159.6 356.1 356.1S710.5 869.3 514 869.3z" p-id="7585" fill="#d81e06"></path><path d="M739.7 377.4L525 592.2c-24.3 24.3-63.9 24.3-88.2 0.1l-95.5-95.1-30.1 30.3 95.5 95.1c20.5 20.4 47.4 30.6 74.2 30.6 26.9 0 53.9-10.2 74.3-30.7l214.7-214.7-30.2-30.4z" p-id="7586" fill="#d81e06"></path>
          </svg>
          <svg t="1737974002774" class="icon" viewBox="0 0 1024 1024" version="1.1" 
          xmlns="http://www.w3.org/2000/svg" p-id="6573" width="36" height="36">
          <path d="M229.643 233.89c-26.054 3.28-52.107 24.846-60.636 49.688-5.683 15.47-107.536 454.219-108.005 462.19-0.949 22.968 12.314 39.844 34.104 44.064 8.055 1.874 266.703 1.874 275.232 0 24.631-4.69 47.843-23.908 56.372-47.345 3.316-8.906 108.48-456.093 108.48-463.595 1.422-21.096-11.372-38.44-31.738-44.533-4.739-0.934-262.912-1.874-273.81-0.47z" fill="#E60012" p-id="6574"></path><path d="M470.762 233.89c-26.054 3.28-52.107 24.846-60.632 49.688-5.214 15.47-107.534 454.219-107.534 462.19-0.95 22.968 12.314 39.844 34.108 44.064 8.05 1.874 266.698 1.874 275.227 0 24.635-4.69 47.847-23.908 56.372-47.345 3.317-8.906 108.479-456.093 108.479-463.595 1.424-21.096-11.366-38.44-31.736-44.533-5.214-0.934-263.387-1.874-274.284-0.47z" fill="#00508E" p-id="6575"></path><path d="M722.308 233.89c-26.054 3.28-52.112 24.846-60.637 49.688-5.209 15.47-107.534 454.219-107.534 462.19-0.945 22.968 12.32 39.844 34.108 44.064 8.055 1.874 200.383 1.874 208.908 0 24.634-4.69 47.847-23.908 56.372-47.345 3.316-8.906 108.484-456.093 108.484-463.595 1.418-21.096-11.371-38.44-31.743-44.533-4.734-1.404-220.748-2.343-231.645-0.934h23.687v0.465z" fill="#00908C" p-id="6576"></path><path d="M221.589 376.39c0 0.47-0.476 3.282-1.42 6.095-10.896 36.562-21.793 85.781-20.37 91.874 3.79 18.283 30.793 16.876 40.266-2.343 2.842-5.154 23.212-90.936 23.212-97.028 0-0.47 32.212 0 32.212 0.464 0 0 0 1.408-0.475 2.817-0.474 1.403-5.683 21.091-11.366 44.529-12.795 49.688-14.213 54.842-20.845 64.686-21.793 31.878-94.746 30.94-100.429-1.404-1.422-7.032 14.213-88.124 21.32-110.159 0-1.403 37.895-0.469 37.895 0.47z m484.139 0c21.79 4.69 28.42 22.03 18.472 47.816-9.947 25.78-31.262 37.028-68.686 37.028-11.371 0-10.423-1.874-17.529 33.282-1.419 6.562-2.841 12.656-2.841 13.594-0.476 2.343-34.11 2.343-33.635 0 28.426-120.468 30.793-130.78 30.793-131.72l0.474-1.402h34.104c27.003 0.464 34.583 0.464 38.848 1.403z m-292.282 46.408c4.735 0.938 8.05 4.69 8.05 7.97 0 11.717-24.16 19.688-33.16 10.779-8.525-8.905 9.475-22.5 25.11-18.75z m-83.849 8.904c0 0.94-0.474 2.817-0.474 4.22l-0.474 1.878 5.683-2.816c15.16-7.497 29.844-6.094 34.583 3.281 2.841 5.629 2.367 8.91-5.21 43.595-1.422 6.094-3.315 14.534-3.79 18.748-1.897 9.38-0.474 8.91-17.528 8.91-14.687 0-14.687 0-14.212-1.408 0-0.938 1.896-8.435 3.79-17.345 7.58-33.277 8.055-37.967 1.422-37.967-3.79 0-9.004 2.343-9.473 3.75-0.948 3.282-9.478 44.06-9.952 47.812l-0.945 4.22-14.687 0.938c-17.998 0.47-16.58 1.873-12.79-14.064 5.21-20.626 8.055-35.154 9.949-48.28 2.367-14.063 0.948-12.655 14.212-14.532 6.158-0.94 12.315-1.874 14.213-2.343 4.735-1.409 5.683-0.94 5.683 1.403z m225.014-0.464c0 0.933-0.474 2.811-0.474 4.216l-0.476 2.346 5.688-2.816c29.37-14.998 40.737-2.813 32.212 35.628-1.893 8.436-4.265 20.623-5.683 26.25-0.949 6.094-2.372 11.248-2.842 11.717-1.898 1.874-29.844 1.41-29.375 0 0-0.938 1.898-8.435 3.791-16.875 8.056-34.216 8.056-38.436 0.949-38.436-5.683 0-8.525 1.873-9.473 6.092-1.424 5.155-8.53 38.906-9.475 45l-0.948 5.158-14.687 0.47c-17.999 0.465-16.58 2.342-12.316-15.003 4.74-18.75 8.056-36.094 10.423-48.749 1.893-12.187 0.474-10.782 12.315-12.656 5.213-0.938 11.846-1.878 14.214-2.342 4.738-2.348 6.157-1.878 6.157 0z m287.547-0.47c1.892 28.592 2.368 37.028 2.368 37.498 0 0.47 4.264-7.032 8.999-16.406 9.473-18.749 7.58-16.876 18.002-18.28 2.842-0.469 8.525-1.409 12.79-2.342 10.423-1.878 10.423-2.817-1.423 17.81-16.105 27.658-38.368 66.564-46.423 80.627-24.157 43.591-24.157 43.591-44.527 44.06l-12.316 0.47 0.945-3.282c0.474-1.873 1.897-5.623 2.37-8.435l1.42-5.159h3.79c4.265 0 5.209-0.94 9-7.502 1.423-2.342 3.79-6.093 4.738-8.435 1.42-2.343 6.158-9.844 9.949-17.345l7.58-13.125-1.897-17.34c-2.367-20.158-5.209-44.065-6.631-51.097-0.95-6.562-0.95-6.562 7.58-7.5 3.79-0.466 9.948-1.874 13.264-2.343 8.999-2.812 9.947-2.812 10.422-1.874z m-357.183 0.47c36.476 6.562 23.686 69.37-16.106 78.28-27.003 6.094-45.475-4.22-45.475-24.847 0.47-36.093 27.472-59.53 61.58-53.433z m272.86 1.873c1.893 0.938 4.739 2.812 6.158 4.22 2.367 2.342 2.367 2.342 2.367 0.934 0.475-1.873 0-1.873 18.951-4.685 15.158-2.342 14.684-2.342 13.739 1.874-6.158 26.249-11.371 49.217-13.739 60.47-3.315 16.876-0.948 14.998-19.421 14.529h-15.635v-1.874c0-1.873-0.945-2.812-1.894-1.407-5.213 8.44-30.792 5.158-37.898-5.155-17.525-26.25 19.896-81.562 47.371-68.906z m-340.129 13.595s0 2.342-0.474 4.219c-3.786 14.999-10.418 45.469-11.842 51.092l-1.422 7.032-15.632 0.469c-18.472 0.47-17.528 1.404-13.738-9.843 3.316-10.783 6.633-23.908 8.53-37.972 1.892-12.186 0-10.313 13.738-12.186 6.157-0.94 12.79-1.873 14.208-2.342 3.79-0.939 6.158-0.939 6.632-0.47z m82.9 97.028c0 0.47-0.944 2.348-2.367 4.69-0.95 2.342-2.367 4.22-2.367 4.22 27.946 0.464 28.895 0.464 28.42 1.873l-5.209 16.876h-40.74l-2.367 1.873c-5.214 4.689-32.686 10.782-32.686 7.031l5.21-16.875h3.789c6.632 0 8.05-1.404 13.738-11.247l4.735-8.91c24.636-0.465 29.843 0 29.843 0.47z m62.06 0c0 0.47-0.475 2.812-1.424 5.629-0.948 2.342-1.417 4.685-1.417 5.154 0 0 2.366-0.94 5.207-3.28 10.423-7.033 19.422-8.437 45.95-8.437 10.423 0 19.422 0 19.896 0.465 0.475 0.939-15.156 51.565-17.528 56.25-3.316 6.098-6.633 9.379-11.84 11.721l-4.74 1.874-26.998 0.47-27.003 0.468-4.738 15.937c-9.474 30.47-9.474 28.128 4.264 26.72 10.897-0.94 10.423-1.873 7.107 9.374l-2.842 9.375h-13.738c-29.844 0.47-33.634-1.404-30.793-13.594 1.423-6.094 35.528-117.656 36.002-118.595 0.474-0.465 24.635-0.465 24.635 0.47z m124.584 0c0 0.47-0.474 1.877-0.944 3.75-1.423 4.69-1.423 4.69 4.735 1.41 8.054-4.221 27.002-5.629 65.845-5.629h12.32v5.629c0 6.562 0.475 7.03 6.158 7.966l4.264 0.469-2.372 8.44-2.366 8.435h-8.53c-21.789 0.47-25.104-1.873-25.58-14.528v-6.098l-1.418 4.22-1.423 4.69H733.2c-2.367 0-4.735 0-4.735 0.47 0 0-23.211 76.401-26.528 87.184-0.474 0.94 0 1.409 2.843 1.409 4.264 0 4.264 0 2.841 3.745-1.419 4.221-1.419 4.221 3.316 4.221 3.316 0 5.214-0.47 7.58-1.873 3.317-1.878 3.317-1.408 18.473-22.5l6.158-8.909h-12.79c-15.631 0-14.207 0.939-11.366-8.435l2.367-7.502h31.268c2.841-9.844 3.785-12.656 3.785-13.125 0-0.47-6.632-0.47-15.156-0.47h-15.158l4.735-16.875h42.633c23.212 0 42.638 0 42.638 0.47 0 0.469-0.948 4.22-2.37 8.44l-2.368 7.966-14.213 0.469-14.21 0.469c-2.37 7.032-3.315 10.313-3.789 11.252l-0.474 1.873h13.738c16.106 0 15.157-0.938 11.84 8.436l-2.367 7.501h-31.266l-4.735 5.624h12.316l1.892 11.252c1.898 12.656 1.898 12.656 8.055 12.656 4.74 0 4.74-0.94 1.424 10.312l-2.847 9.375h-8.999c-15.631 0-18.473-2.342-21.32-18.28l-1.418-10.313-5.683 7.502c-15.636 21.091-16.58 21.56-36.476 21.56-12.794 0-12.794 0-10.897-3.75 0.475-1.873 0.475-1.873-3.316-1.873-3.79 0-3.79 0-4.738 2.812l-0.475 2.811H666.88l0.474-1.408c1.424-4.684 3.79-4.215-25.105-4.215-25.109 0-26.527 0-26.053-1.409l2.368-8.435c2.841-8.44 2.367-8.44 5.209-8.44 2.37 0 2.37 0 3.315-3.281 22.268-73.592 29.374-97.03 30.319-100.31l1.897-6.094h13.264c8.525 0 14.682 0.465 14.682 0.934z m-168.167 40.314l-5.213 16.406h-28.42c-2.842 9.375-3.79 12.187-4.266 13.125-0.474 1.409 0.475 1.409 14.214 1.409 8.054 0 14.686 0.47 14.686 0.47 0 0.464-0.474 1.402-0.95 2.81-0.473 0.935-1.422 4.686-2.365 8.436l-1.898 6.093H475.5l-3.316 11.252c-4.738 15.937-4.264 16.406 13.738 14.064 7.581-0.939 7.107-1.877 3.79 9.375l-2.841 9.374h-19.9c-31.263 0-31.737-0.939-23.212-27.658 2.372-8.436 4.74-15.468 4.74-15.468s-3.317-0.47-8.056-0.47c-4.26 0-8.05 0-8.05-0.469 3.315-11.716 4.734-15.468 4.734-16.406 0.474-0.934 1.423-1.403 8.53-1.403h8.05l3.79-14.534h-7.576c-5.688 0-7.58 0-7.58-0.939 0-0.933 4.264-14.528 4.733-15.937 0.95-0.933 72.483-0.469 72.008 0.47z m91.9 33.752c0 0.938-0.949 3.75-1.42 6.093-2.846 13.125-6.631 15.937-21.792 16.875-5.209 0.47-9.948 0.938-9.948 0.938-0.949 1.405-0.949 12.657 0 14.53l1.423 1.877 9.473-0.47c5.21-0.469 9.474-0.469 9.474-0.469 0 0.939-5.21 17.345-5.684 17.81-0.948 0.94-29.843 0.47-33.634-0.934-5.683-1.878-5.683-1.409-5.214-30.94l0.476-25.78h24.16v9.844h4.74c5.208 0 5.682-0.47 8.05-7.033l1.422-3.75h9.475c8.524 0.47 9.473 0.47 8.999 1.409z m44.53-200.626l-5.213 22.5h7.107c36.476 0.938 51.637-40.784 16.105-43.596-5.684-0.47-10.893-0.939-11.367-0.939-1.422 0-1.422 1.41-6.631 22.035z m-188.542 31.874c-8.999 3.75-17.524 37.501-10.417 42.656 5.208 4.22 12.79-2.812 16.58-14.529 6.158-21.565 4.26-31.878-6.163-28.127z m282.339 2.342c-9.478 4.69-16.58 37.971-9.478 41.721 9.478 5.155 21.794-12.654 21.794-31.877 0-8.905-5.214-13.125-12.316-9.844zM557.927 562.957l-2.368 8.436c-1.422 4.22-2.367 7.97-2.841 8.435 0 0.47 2.367-0.465 5.683-2.343 9.473-4.685 12.316-5.623 26.053-6.092l11.846-0.47c1.893-5.623 2.368-7.966 2.368-8.435 0.474-0.47-40.267-0.47-40.741 0.47z m-8.05 27.185l-1.899 7.5 40.741-0.47 2.368-7.5c-32.212 0-41.21 0-41.21 0.47z m128.848-16.876c-1.896 6.097-3.315 10.782-2.841 10.782l5.683-1.873c2.842-0.94 8.055-2.347 10.897-2.812 2.841-0.469 5.209-0.94 5.683-0.94 0 0 4.74-14.532 4.74-15.001 0 0-4.74-0.465-10.423-0.465H682.04l-3.316 10.31z m-7.58 23.907c0 0.469-1.893 5.159-3.317 10.782-1.892 5.624-3.315 10.783-3.315 10.783 0 0.465 2.367-0.47 5.683-1.878 3.316-1.403 8.055-2.812 10.897-3.28 6.157-0.94 6.631-1.404 7.107-3.751 0.474-0.935 1.422-4.685 2.366-7.497l1.898-5.628H682.04c-5.683 0-10.897 0-10.897 0.469z m-16.58 53.908l20.845 0.47c4.264-14.064 5.683-18.754 5.683-19.223l-20.844-0.934-5.684 19.687z" fill="#FFFFFF" p-id="6577"></path></svg>
          <span style="font-size: 20px;margin-left: 5px;">银联</span>
        </div>
      </div>
    </div>
    <el-button type="success" class="button" @click="handlePay">下一步</el-button>
  </div>

  <!-- 支付二维码弹窗 -->
  <el-dialog v-model="visiable_pay" title="订单支付" width=30% draggable>
    <div style="display: flex;justify-content: center;align-items: center;">
      <img :src="qrCodeSrc" alt="支付二维码" v-if="qrCodeSrc" />
      <p v-else>加载二维码中...</p>
    </div>
  </el-dialog>

  <el-dialog v-model="vis_err" width=30% draggable>
      <span style="font-size: 18px;">有未支付的订单，点击确认跳转支付记录</span>
      <template #footer>
      <div class="dialog-footer">
        <el-button @click="vis_err = false">取消</el-button>
        <el-button type="success" @click="vis_err = false,$router.push('/record')">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup>
import { useRoute,useRouter } from 'vue-router';
import {ref,onMounted,onBeforeUnmount,computed} from 'vue'
import { reqhandlePay,reqPayStatus } from '@/api/pay';

// 进度条
import NProgress from "nprogress";

import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

const patient=JSON.parse(localStorage.getItem('PATIENT'))
const $route=useRoute()
const $router=useRouter()
let minutes=ref(10)
let seconds=ref(0)

const updateTime = () => {
  if (seconds.value === 0) {
    if (minutes.value === 0) {
      clearInterval(interval); // 倒计时结束
      $router.back()
    } else {
      minutes.value -= 1;
      seconds.value = 59;
    }
  } else {
    seconds.value -= 1;
  }
};

let interval=null//定时器
onMounted(() => {
  interval=setInterval(updateTime, 1000); // 每秒更新一次倒计时
})

onBeforeUnmount(() => {
  clearInterval(interval); // 清理定时器
  clearInterval(count.value)
})
// 时间格式化
const formattedTime = computed(() => {
  const formattedMinutes = String(minutes.value).padStart(2, '0');
  const formattedSeconds = String(seconds.value).padStart(2, '0');
  return `${formattedMinutes}分${formattedSeconds}秒`;
})
// 金额格式化
const money=computed(() => {
  return parseFloat($route.query.money).toFixed(2);  // 自动补足两位小数
});
// 控制选中
let visiable=ref('vx')

// 支付
let visiable_pay=ref(false)//控制支付二维码显示
let qrCodeSrc = ref('');//存储支付二维码
let outTradeNo=ref('')//存储订单id
let count=ref(null)//存储定时器
let vis_err=ref(false)//跳转预约记录展示未支付订单

const handlePay=async ()=>{
  if(visiable.value=='vx'){
    // 处理微信支付
    // console.log(JSON.parse(localStorage.getItem('PATIENT')))
  }else if(visiable.value=='alipay'){
    // 处理支付宝支付
    NProgress.start()
    let res=await reqhandlePay(
      patient.account,
      patient.sex,
      patient.idCard,
      patient.phone,
      $route.query.did,
      $route.query.sid,
      $route.query.money,
      patient.des,
      patient.time,
      localStorage.getItem('UID'))
    NProgress.done()
    // console.log(res)
    if(res.data.code==1){
      // 展示支付二维码
      visiable_pay.value=true
      qrCodeSrc.value = `data:image/png;base64,${res.data.data.codeUrl}`;
      outTradeNo.value=res.data.data.outTradeNo
        // 查询支付结果
      count.value=setInterval(async ()=>{
        await PayStatus(outTradeNo.value)
      },8000)
    }else{
      if(res.data.msg=='有订单未支付'){
        vis_err.value=true
      }else{
        alert(`${res.data.msg}`)
      }
    }
  }else if(visiable.value=='unionpay'){
    // 处理银联支付
  }
}

// 查询支付结果
const PayStatus=async (id)=>{
  let res=await reqPayStatus(id)
  console.log(res)
  if(res.data.code==1){
    clearInterval(count.value); // 清除定时器
    visiable_pay.value = false; // 关闭弹窗
    $router.replace('/success')
  }
}
</script>

<style lang="scss" scoped>
.root{
  background-color: #f3f3f3;
  margin-left: 10px;
  position: relative;
  min-width: 1800px;
  .top{
    width:1800px;
    height:200px;
    background-color: #bbbbbb;
    margin-top: 20px;
    padding-left: 10px;
    .content{
      font-size: 28px;
      padding-top: 30px;
    }
    .hospital{
      font-size: 18px;
      margin-top: 60px;
    }
    .order{
      font-size: 18px;
    }
  }
  .mid{
    margin-top: 20px;
    font-size: 20px;
  }
  .bottom{
    .select_font{
      color: #e32a2a;
      font-size: 20px;
    }
    .pay_style{
      .vx:hover{
        color: #bbbbbb;
        cursor: pointer;
      }
      .alipay:hover{
        color: #bbbbbb;
        cursor: pointer;
      }
      .unionpay:hover{
        color: #bbbbbb;
        cursor: pointer;
      }
    }
  }
  .button{
    position: absolute;
    top:320px;
    left:700px
  }
}
</style>
